<template>
  <div class="search">
    <div class="head">
      <div class="left">
        <div class="img" @click="go">
          <img src="../assets/img/fanhui.png" alt="" />
        </div>
      </div>
      <div class="mid">
        <div>
          <span></span>
          <input
            type="text"
            placeholder="搜索产品"
            v-model="keyword"
            @keyup.enter="add"
          />
        </div>
      </div>
      <div class="right">
        <div class="img" @click="add">搜索</div>
      </div>
    </div>
    <div class="history">
      <h3>历史搜索</h3>
      <div class="itemy">
        <div class="word" v-for="item in historyList" :key="item">
          {{ item }}
        </div>
      </div>
      <h4 @click="clear">清空搜索历史</h4>
    </div>

    <div class="hot" v-if="!Datalists.length">
      <h2>热门搜索</h2>
      <div class="boxw" v-for="(item,index) in hotlist" :key="item.id">
        <h4>{{ item.titleName }}</h4>
        <div class="itemp">
          <div
            class="word1" v-for="e in hotlist[index].cmHotSearchWordVoList" :key="e.id">
            {{ e.wordName }}
          </div>
        </div>
      </div>
    </div>
    <p v-show="show">未找到您所需要搜索的内容</p>

    <router-link
      tag="div"
      :to="'/page?id=' + item.id"
      class="items"
      v-for="item in Datalists"
      :key="item.id"
    >
      <div class="img">
        <img :src="item.img" alt="" />
        <span>跟团游|广州出发</span>
      </div>
      <div class="word">
        <div class="top">
          {{ item.title }}
        </div>
        <div class="mid">
          <span v-show="item.name">{{ item.name }}</span>
        </div>
        <div class="bottom">
          <span><i>￥</i>{{ item.num }}</span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
import { getgroupList } from "../assets/api/group";
import { gethotsearchList } from "../assets/api/search";
export default {
  data() {
    return {
      // hotsearchList1: null,
      // hotsearchList2: null,
      keyword: "",
      historyList: [],
      groupList1: [],
      Datalists: [],
      hotlist: [],
      hotwordlist: [],
      show: false,
    };
  },
  methods: {
    go() {
      this.$router.go(-1);
    },
    //清除历史记录
    clear() {
      this.historyList = [];
      window.localStorage.setItem("history", []);
    },
    //搜索
    add() {
      this.historyList.push(this.keyword);
      //去重
      const map = new Map();
      this.historyList = this.historyList.filter((key) => !map.has(key)&&map.set(key,1));

      window.localStorage.setItem("history", JSON.stringify(this.historyList));

      (this.Datalists = []),
        this.groupList1.forEach((item) => {
          if (item.title.indexOf(this.keyword) != -1) {
            this.Datalists.push(item);
          } else {
            this.show = false;
          }
        });
      if (this.Datalists.length == 0) {
        this.show = true;
      }
    },
  },
  created() {
    //历史记录
    
    if (window.localStorage.getItem("history")) {
      this.historyList = JSON.parse(window.localStorage.getItem("history"));
    } else {
      this.historyList = [];
    }
      const map = new Map();
      this.historyList = this.historyList.filter((key) => !map.has(key)&&map.set(key,1));

    getgroupList().then((data) => {
      this.groupList1 = data.groupList[0];
    });

    gethotsearchList({
      typeCode: "ALL",
    }).then((data) => {
      this.hotlist = data.cmHotSearchTitleVoList;
      console.log(data);
      console.log(this.hotlist);
      // console.log(this.hotlist[0].cmHotSearchWordVoList);
      // console.log(this.hotlist[1].cmHotSearchWordVoList);
    });
  },
  beforeDestroy(){

  }
};
</script>

<style lang="scss" scoped>
.search {
  .head {
    height: 44px;
    display: flex;
    border-bottom: 1px solid #ebebeb;
    .left {
      display: flex;
      align-items: center;
      padding: 0 0 0 10px;
      font-size: 15px;
      .img {
        width: 20px;
        height: 20px;
        img {
          width: 100%;
        }
      }
    }
    .mid {
      display: flex;
      flex: 1;
      align-items: center;
      & > div {
        flex: 1;
        height: 28px;
        line-height: 28px;
        background: #fafafa;
        border-radius: 13px;
        display: flex;
        align-items: center;
        span {
          display: block;
          width: 20px;
          height: 20px;
          background: url(../assets/img/erji.png) no-repeat -39px -1px;
          background-size: 250px;
          margin-left: 13px;
        }
        input {
          border: none;
          outline: none;
          font-size: 14px;
        }
      }
    }
    .right {
      width: 13%;
      display: flex;
      align-items: center;
      margin-left: 8px;
      .img {
        padding: 6px 12px;
        background: #fde55e;
        font-size: 12px;
        border-radius: 15px;
      }
    }
  }
  .history {
    margin: 15px 16px;
    h3 {
      font-size: 16px;
      padding: 10px 0;
    }
    .itemy {
      display: flex;
      flex-wrap: wrap;
      .word {
        margin: 6px;
        font-size: 14px;
        padding: 8px 30px;
        background: #f5f5f5;
        border-radius: 20px;
      }
    }
    h4 {
      text-align: center;
      color: #7d7d7d;
      font-size: 14px;
      font-weight: normal;
      border-bottom: 1px solid #ebebeb;
      padding: 10px 0;
    }
  }
  .hot {
    margin: 0 16px;
    h2 {
      font-size: 16px;
      padding: 10px 0;
    }
    h4 {
      color: #00a0e9;
      font-size: 14px;
    }
    h3 {
      color: #00a0e9;
      font-size: 14px;
      padding: 10px 0;
    }
    .itemp {
      display: flex;
      flex-wrap: wrap;
      .word1 {
        margin: 6px;
        font-size: 14px;
        padding: 8px 22px;
        background: #f5f5f5;
        border-radius: 20px;
      }
    }
  }
  p {
    text-align: center;
    padding: 20px 0;
  }
  .items {
    padding: 4px;
    border-bottom: 1px solid #ebebeb;
    display: flex;
    .img {
      width: 150px;
      height: 100px;
      position: relative;
      img {
        width: 100%;
      }
      span {
        display: block;
        position: absolute;
        top: 2px;
        left: 4px;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        border: 1px solid transparent;
        border-radius: 20px;
        font-size: 12px;
        padding: 2px 4px;
      }
    }
    .word {
      margin-left: 10px;
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-around;
      .top {
        color: #000;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        white-space: initial;
        height: 40px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin-top: 2px;
      }
      .mid {
        span {
          border: 1px solid #00b9ef;
          color: #00b9ef;
          font-size: 12px;
          transform: scale(0.8);
          border-radius: 20px;
          padding: 3px;
          margin-right: 5px;
        }
      }
      .bottom {
        margin-right: 5px;
        span {
          color: #ff8c00;
          font-size: 20px;
          i {
            font-style: normal;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
